<template>
  <el-upload :action="url" :show-file-list="false" :on-success="uploadSuccess"
             list-type="picture-card">
    <img v-if="modelValue" :src="src" class="avatar">
    <el-icon v-else>
      <Plus/>
    </el-icon>
  </el-upload>
</template>

<script>

import sysConfig from "@/config";

export default {
  title: "头像",
  icon: "el-icon-time",
  description: "头像管理",
  props: ['modelValue'],
  emits: ['update:modelValue'],
  data: function () {
    return {
      url: sysConfig.REMOTE_URL + "/upload",
      src: "",
      loading: false
    }
  },
  mounted: function () {
    this.src= this.modelValue;
  },
  watch: {
    value: {
      get() {
        this.src= this.modelValue;
        return this.modelValue
      },
      set(value) {
        this.src= this.value;
        console.info(value)
        this.$emit('update:modelValue', value)
      }
    },
    modelValue:{
      get() {
        this.src= this.modelValue;
        return this.modelValue
      },
      set(value) {
        this.src= this.value;
      }
    }
  },
  methods: {
    async uploadSuccess(res) {
      this.src = res.data;
      this.$emit('update:modelValue', res.data);
      let resData = await this.$http.form("/url", {file: res.data});
      if (resData.code === 200) {
        console.info(resData.data)
        this.src=resData.data;
      }


    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 64px;
  height: 64px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader input[type="file"] {
  display: none;
}

.el-upload--picture-card {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 64px;
  height: 64px;
  line-height: 64px;
  vertical-align: top;
}

.el-upload--picture-card i {
  font-size: 18px;
}

.el-upload--picture-card input {
  display: none;
}

.el-upload-list--picture-card .el-upload-list__item {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 64px;
  height: 64px;
  margin: 0 8px 8px 0;
  display: inline-block;
}

.el-upload-list--picture-card .el-upload-list__item-actions span + span {
  margin-left: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 20px;
  color: #8c939d;
  width: 100%;
  height: 100%;
  line-height: 62px;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 100%;
  display: block;
}

.el-card__body img {
  width: 100%;
}

.el-card {
  margin: 10px 0px;
}

.card {
  position: relative;
}

.card:hover .state {
  display: flex;

}

.card .state {
  display: none;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  left: 0px;
  top: 0px;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 10px;
}
</style>
